<?php

namespace JsonLowCode\UI;

use JsonLowCode\Schema;
use JsonLowCode\Traits\Props\HasHeight;
use JsonLowCode\Traits\Props\HasWidth;
use JsonLowCode\Traits\Slots\HasSlotPlaceholder;

/**
 * 图片组件 NImage
 * @method static Image make(string $src = null) Image组件
 */
class Image extends Schema
{

    protected string $componentName = "NImage";

    use HasWidth, HasHeight;

    use HasSlotPlaceholder;

    public function __construct(string $src = null)
    {
        parent::__construct();
        $this->componentName("NImage");
        $src && $this->src($src);
    }

    /**
     * 图片来源
     * @param string $src
     * @return $this
     */
    public function src(string $src): static
    {
        return $this->prop('src', $src);
    }

    /**
     * 图片说明
     * @param string $alt
     * @return $this
     */
    public function alt(string $alt): static
    {
        return $this->prop('alt', $alt);
    }

    /**
     * 组件中 img 元素的属性
     * @param string|array $imgProps
     * @return $this
     */
    public function imgProps(string|array $imgProps = []): static
    {
        return $this->prop('imgProps', $imgProps);
    }

    /**
     * 图片加载失败时显示的地址
     * @param string $fallbackSrc
     * @return $this
     */
    public function fallbackSrc(string $fallbackSrc): static
    {
        return $this->prop('fallbackSrc', $fallbackSrc);
    }

    /**
     * 是否在进入 intersection-observer-options 配置的视口之后再开始加载
     * @param string|bool $bool,
     * @return $this
     */
    public function lazy(string|bool $bool = true): static
    {
        return $this->prop('lazy', $bool);
    }

    /**
     * 预览图片的图片地址
     * @param string $previewSrc
     * @return $this
     */
    public function previewSrc(string $previewSrc): static
    {
        return $this->prop('previewSrc', $previewSrc);
    }

    /**
     * 是否禁用单击图像预览
     * @param string|bool $bool
     * @return $this
     */
    public function previewDisabled(string|bool $bool = true): static
    {
        return $this->prop('previewDisabled', $bool);
    }

    /**
     * 预览图片时 img 元素的属性
     * @param string|array $previewedImgProps
     * @return $this
     */
    public function previewedImgProps(string|array $previewedImgProps = []): static
    {
        return $this->prop('previewedImgProps', $previewedImgProps);
    }

    /**
     * 图片放大后是否展示底部工具栏
     * @param string|bool $bool,
     * @return $this
     */
    public function showToolbar(string|bool $bool = true): static
    {
        return $this->prop('showToolbar', $bool);
    }

    /**
     * 是否展示工具栏的提示
     * @param string|bool $bool,
     * @return $this
     */
    public function showToolbarTooltip(string|bool $bool = true): static
    {
        return $this->prop('showToolbarTooltip', $bool);
    }

    /**
     * 图片在容器内的的适应类型
     * @param string $objectFit 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
     * @return $this
     */
    public function objectFit(string $objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'): static
    {
        return $this->prop('objectFit', $objectFit);
    }

    /**
     * 图片在容器内的的适应类型
     * @param string|array $value { root?: Element | Document | string | null, rootMargin?: string, threshold?: number | number[]; }
     * @return $this
     */
    public function intersectionObserverOptions(string|array $value = []): static
    {
        return $this->prop('intersectionObserverOptions', $value);
    }

    /**
     * 图片组
     * @param $children
     * @return ImageGroup
     */
    public function group($children): ImageGroup
    {
        return new ImageGroup($children);
    }
}
